<!-- 预约看货详情 -->
<template>
	<view class="page">
		<u-navbar :isFixed="true" title="预约看货详情" :borderBottom="false"></u-navbar>
		<view class="top">
			<image class="flow" :src="suborderimags" mode="widthFix"></image>
			<navigator class="sourthroad" url="/home/login/reading?name=操作指南&type=11" hover-class="none">操作指南
			</navigator>
		</view>
		<view class="goods">
			<view class="buyer" v-if="type==0">买家：{{detail.joinbuyers.name}}</view>
			<view class="buyer" v-if="type==1">卖家：{{detail.joinseller.name}}</view>
			<navigator hover-class="none" :url="'/home/index/supplydetail?id='+detail.getgoodsinfo.id"
				class="flex_align">
				<image class="goodsImg" :src="detail.getgoodsinfo.image"></image>
				<view class="content">
					<view class="goodsName clamp2">{{detail.getgoodsinfo.title}}</view>
					<view class="goodsName clamp2">{{detail.spec_value}}</view>
					<view class="price">￥{{detail.getgoodsinfo.money}}/{{detail.getgoodsinfo.unit}}</view>
				</view>
			</navigator>
			<view class="spec" v-if="detail.spec">
				<view class="tr" v-for="(item,index) in detail.spec" :key="index">
					<view class="td">{{index}}</view>
					<view class="td">{{item}}</view>
				</view>
			</view>
			<view class="bottom">
				<view class="item flex_align">
					<view class="name">购买数量</view>
					<view>{{detail.number}}{{detail.getgoodsinfo.unit}}</view>
				</view>
				<view class="item flex_align">
					<view class="name">看货时间</view>
					<view class="value">{{detail.lookgoodstime}}</view>
					<picker mode="date" :value="startDate" :start="nowtime" @change="bindDateChange">
						<view class="setval" @click="time_show=true" v-if="detail.status==1">修改</view>
					</picker>
				</view>
				<view class="item flex_align">
					<view class="name">出发地</view>
					<view>{{detail.city}}</view>
				</view>
				<view class="item flex_align">
					<view class="name">备注说明</view>
					<view class="value">{{detail.client_note}}</view>
				</view>
			</view>
		</view>
		<view class="wrap">
			<view class="item flex_bet_align">
				<view class="name">看货编号</view>
				<view class="clamp1 value">{{detail.order_sn}}</view>
				<view class="copy" @click="$plug.copyText(detail.order_sn)">复制</view>
			</view>
			<view class="item flex_align">
				<view class="name">创建时间</view>
				<view class="clamp1">{{detail.createtime}}</view>
			</view>
			<view class="item flex_align" v-if="detail.confirmtime.length>0">
				<view class="title">确认时间</view>
				<view class="value">{{detail.confirmtime}}</view>
			</view>
			<view class="item flex_align" v-if="detail.successtime.length>0">
				<view class="title">完成时间</view>
				<view class="value">{{detail.successtime}}</view>
			</view>
			<view class="item flex_align" v-if="detail.canceltime.length>0">
				<view class="title">取消时间</view>
				<view class="value">{{detail.canceltime}}</view>
			</view>
			<view class="item flex_align" v-if="detail.refusetime.length>0">
				<view class="title">拒绝时间</view>
				<view class="value">{{detail.refusetime}}</view>
			</view>
		</view>
		<view class="wrap">
			<view class="item flex_align">
				<view class="name">协商单价</view>
				<view class="value clamp1">￥{{detail.unit_price}}</view>
				<view class="setval" @click="unit_show=true" v-if="type==0&&detail.status==1">修改价格</view>
			</view>
			<view class="item flex_align">
				<view class="name">其他杂费</view>
				<view class="value clamp1">￥{{detail.other_price}}</view>
				<view class="setval" @click="other_show=true" v-if="type==0&&detail.status==1">添加杂费</view>
			</view>
			<!-- <view class="item flex_align">
				<view class="name">诚意金</view>
				<view class="value clamp1">￥{{detail.money}}</view>
				<view class="setval" @click="money_show=true" v-if="type==0&&detail.status==1">添加诚意金</view>
			</view> -->

			<!-- <simple-address ref="simpleAddress" :pickerValueDefault="cityPickerValueDefault" @onConfirm="onConfirm"
				themeColor="#007AFF"></simple-address> -->
			<view class="item flex_align">
				<view class="name">目的地</view>
				<view class="value" v-if="detail.status!=1">{{detail.destination[0]}}</view>
				<view @click="showpicker=true" v-if="detail.status==1" class="value">
					<view v-if="!address[0]">请选择地区</view>
					<view v-if="address[0]">{{address[0]}} {{address[1]}} {{address[2]}}</view>
				</view>
			</view>

			<view class="">
				<u-picker v-model="showpicker" @confirm="setcity" :range="address" :default-region="address"
					mode="region" class="lineputs"></u-picker>
			</view>
		</view>
		<view class="exhibition" v-if="type==0">
			<view class="reply">
				<view class="status" v-if="detail.status==1">待卖家确认</view>
				<view class="status" v-if="detail.status==2">待买家确认看货支付诚意金</view>
				<view class="status" v-if="detail.status==3">订单已拒绝</view>
				<view class="status" v-if="detail.status==4">待实地看货</view>
				<view class="status" v-if="detail.status==5">已完成看货啦</view>
				<view class="status" v-if="detail.status==6">订单已完成</view>
				<view class="status" v-if="detail.status==7||detail.status==8">订单已取消</view>
				<view class="status" v-if="detail.status==9">申请取消看货，等待你审核</view>
				<view class="status" v-if="detail.status==10">申请取消被拒，待实地看货</view>
				<!-- <view class="countdown" v-if="detail.status==1||detail.status==2||detail.status==8||detail.status==10">
					<u-count-down :timestamp="timestamp" font-size="24" color="#333333" separator="zh" @end="isonshow"></u-count-down>自动关闭
				</view> -->
				<view class="" v-if="detail.status==1||detail.status==2||detail.status==8||detail.status==10">
					<view class="countdown" v-if="timestamp>0">
						<u-count-down :timestamp="timestamp" font-size="24" color="#333333" separator="zh"
							@end="isonshow">
						</u-count-down>自动关闭
					</view>
				</view>

				<view class="countdown" v-if="detail.status==4&&detail.lookgoodstime">
					买家于{{detail.lookgoodstime}}准时去实地看货哟！</view>
				<view class="countdown" v-if="detail.status==4&&!detail.lookgoodstime">
					<u-count-down :timestamp="timestamp" font-size="24" color="#333333" separator="zh"></u-count-down>
					自动关闭
				</view>
				<view class="countdown" v-if="detail.status==3||detail.status==7||detail.status==8">双方协商可预约下次看货哦</view>
				<view class="countdown" v-if="detail.status==5">赶紧让买家下单购买吧</view>
				<view class="countdown" v-if="detail.status==6">期待再次合作</view>
			</view>
			<view class="foot flex_align">
				<view class="btn" v-if="detail.status==3||detail.status==6||detail.status==7||detail.status==8"
					@click="deleteOrder">删除订单</view>
				<view class="btnFill" v-if="detail.status==1" @click="operate(2)">同意</view>
				<view class="btn" v-if="detail.status==1" @click="operate(3)">拒绝</view>
				<view class="btnFill" v-if="detail.status==9" @click="operate(8)">同意申请</view>
				<view class="btn" v-if="detail.status==9" @click="operate(4)">拒绝申请</view>
				<view class="btnFill" v-if="detail.status==4" @click="operate(5)">确认看货</view>
				<view class="btn" @click="dialing(1,detail.joinbuyers.id,detail.joinbuyers.mobile)">联系买家</view>
				<view class="btn" @click="intention(detail.is_yx)" v-if="detail.status==5">意向客户</view>
				<view class="btn" @click="chat">聊一聊</view>
			</view>
		</view>
		<view class="exhibition" v-if="type==1">
			<view class="reply">
				<view class="status" v-if="detail.status==1">待卖家确认</view>
				<view class="status" v-if="detail.status==2">待买家确认看货支付诚意金</view>
				<view class="status" v-if="detail.status==3">订单已拒绝</view>
				<view class="status" v-if="detail.status==4">待实地看货</view>
				<view class="status" v-if="detail.status==5">已完成看货啦</view>
				<view class="status" v-if="detail.status==6">订单已完成</view>
				<view class="status" v-if="detail.status==7||detail.status==8">订单已取消</view>
				<view class="status" v-if="detail.status==9">申请取消看货，等待审核</view>
				<view class="status" v-if="detail.status==10">申请取消被拒，待实地看货</view>
				<view class="countdown" v-if="detail.status==1||detail.status==2||detail.status==8||detail.status==10">
					<u-count-down :timestamp="timestamp" font-size="24" color="#333333" separator="zh"></u-count-down>
					自动关闭
				</view>
				<view class="countdown" v-if="detail.status==4&&detail.lookgoodstime">
					请于{{detail.lookgoodstime}}准时去实地看货哟！</view>
				<view class="countdown" v-if="detail.status==4&&!detail.lookgoodstime">
					<u-count-down :timestamp="timestamp" font-size="24" color="#333333" separator="zh"></u-count-down>
					自动关闭
				</view>
				<view class="countdown" v-if="detail.status==3||detail.status==7||detail.status==8">双方协商可预约下次看货哦</view>
				<view class="countdown" v-if="detail.status==5">赶紧下单购买吧</view>
				<view class="countdown" v-if="detail.status==6">期待再次合作</view>
			</view>
			<view class="foot flex_align">
				<view class="btn" v-if="detail.status==3||detail.status==6||detail.status==7||detail.status==8"
					@click="deleteOrder">删除订单</view>
				<view class="btn" v-if="detail.status==1" @click="operate(7)">取消订单</view>
				<view class="btnFill" v-if="detail.status==2" @click="pay">立即支付</view>
				<!-- <view class="btnFill" v-if="detail.status==4" @click="operate(5)">确认看货</view> -->
				<view class="btn" v-if="detail.status==4" @click="operate(9)">取消看货</view>
				<view class="btnFill" v-if="detail.status==5" @click="purchase">立即购买</view>
				<view class="btn" v-if="detail.status==5" @click="operate(12)">不满意</view>
				<view class="btn" @click="dialing(2,detail.joinseller.id,detail.joinseller.mobile)">联系卖家</view>
				<view class="btn" @click="chat">聊一聊</view>
			</view>
		</view>

		<!-- 待议单价 -->
		<u-popup mode="center" border-radius="16" v-model="unit_show" :closeable="true">
			<view class="modal">
				<view class="title">协商单价</view>
				<view style="height: 20rpx;"></view>
				<input type="digit" v-model="unit_price" placeholder="请输入协商单价">
				<view class="confirm" @click="addprice(1)">确定</view>
			</view>
		</u-popup>
		<!-- 添加杂费 -->
		<u-popup mode="center" border-radius="16" v-model="other_show" :closeable="true">
			<view class="modal">
				<view class="title">添加杂费</view>
				<view style="height: 20rpx;"></view>
				<input type="digit" v-model="other_price" placeholder="请输入杂费">
				<view class="confirm" @click="addprice(2)">确定</view>
			</view>
		</u-popup>
		<!-- 添加诚意金 -->
		<u-popup mode="center" border-radius="16" v-model="money_show" :closeable="true">
			<view class="modal">
				<view class="title">添加诚意金</view>
				<view style="height: 20rpx;"></view>
				<input type="digit" v-model="money_price" placeholder="请输入诚意金">
				<view class="confirm" @click="addprice(3)">确定</view>
			</view>
		</u-popup>
		<!-- 拒绝 -->
		<u-popup mode="center" border-radius="16" v-model="reason" :closeable="true">
			<view class="modal">
				<view class="title">拒绝理由</view>
				<view style="height: 20rpx;"></view>
				<u-input v-model="refuse_note" type="textarea" :border="true" placeholder="请输入拒绝理由" :maxlength="50"
					:autoHeight="true" class="mainlineinput" :clearable="false" height="200" />
				<view style="height: 20rpx;"></view>
				<u-button shape="circle" type="error" @click="refuse">确认拒绝</u-button>
				<view style="height: 20rpx;"></view>
			</view>
		</u-popup>
	</view>
</template>
<script>
	import amapFile from "../static/js/amap-wx.js"
	import App from '@/App.vue';
	var _this, shak;
	export default {
		data() {
			return {
				timestamp: 0,
				id: 0,
				type: 0, //["求购看货","供应看货"],
				detail: {
					confirmtime: "",
					successtime: "",
					canceltime: "",
					refusetime: "",
					joinbuyers: {},
					joinseller: {},
					getgoodsinfo: {},
					destination: []

				},
				// 显示拒绝理由
				reason: false,
				// 拒接理由
				refuse_note: "",
				// 显示议价
				unit_show: false,
				// 显示杂费
				other_show: false,
				// 显示诚意金
				money_show: false,
				// 议价费用
				unit_price: "",
				// 其他杂费
				other_price: "",
				// 诚意金
				money_price: "",
				// 目的地
				address: ["", "", ""],
				suborderimags: "",
				nowtime: '', //当前时间
				startDate: '',
				cityPickerValueDefault: [0, 0, 1],
				showpicker: false,
			}
		},
		onLoad(options) {
			_this = this
			_this.id = options.id
			_this.type = parseInt(options.type)
			_this.getdata()
			_this.getimg()
			_this.getTime()
		},
		onShow() {
			_this.getcity()
		},
		// 下拉刷新
		onPullDownRefresh: function() {
			_this.getdata()
		},
		methods: {
			// 刷新
			isonshow() {
				_this.timestamp = 0
				_this.getdata()
				_this.$plug.isonshow(2)
			},
			getimg() {
				_this.$api.get("suborderimags", {}).then(data => {
					_this.suborderimags = data
				});
			},
			// 获取当前位置
			getcity() {
				new amapFile.AMapWX({
					key: App.mapkey
				}).getRegeo({
					success: function(data) {
						let address = data[0].regeocodeData.addressComponent
						_this.address = [address.province, address.city, address.district]
						console.log(1111)
					},
					fail: function(data) {
						console.log(2222)
					}
				})
			},
			// 获取数据
			getdata() {
				_this.$api.get("suborderdetail", {
					id: _this.id
				}).then(data => {
					if (!data.successtime) {
						data.successtime = ""
					}
					if (!data.refusetime) {
						data.refusetime = ""
					}
					if (!data.confirmtime) {
						data.confirmtime = ""
					}
					if (!data.canceltime) {
						data.canceltime = ""
					}
					data.city = data.city[0]
					_this.detail = data
					// let str= _this.detail.lookgoodstime
					// str = _this.detail.lookgoodstime.substring(0,10);
					_this.detail.lookgoodstime = _this.detail.lookgoodstime.substring(0, 10);

					_this.unit_price = data.unit_price
					if (data.countdowntime > parseInt(Date.parse(new Date()) / 1000)) {
						_this.timestamp = data.countdowntime - parseInt(Date.parse(new Date()) / 1000)
					}
				});
			},

			// 防抖点击
			click_shake(fn) {
				if (!_this.shake) {
					fn && typeof fn === 'function' && fn()
					_this.shake = true
					setTimeout(function() {
						_this.shake = false
					}, 500)
				}
			},
			//订单操作
			operate(type) {
				if (type == 2) {
					let data = [{
						value: _this.address[0],
						type: 1,
						title: "请选择目的地"
					}]

					if (_this.money_price > 0) {
						data.push({
							value: [parseFloat(_this.money_price).toFixed(2) * 100, _this.$plug.cheng(_this.detail
								.unit_price, _this.detail.number) * 100],
							type: 7,
							title: "诚意金不能超过商品总价"
						})
					}
					console.log(data)
					if (_this.$plug.verify(data)) {
						// uni.showModal({
						// 	content: _this.money_price > 0 ? '确认同意看货？' : '确认无需支付诚意金看货',
						// 	success: function(res) {
						// 		if (res.confirm) {
						// 			// 修改议价接口
						// 		}
						// 	}
						// });
						_this.$api.post("orderedit", {
							order_id: _this.id,
							unit_price: parseFloat(_this.unit_price).toFixed(2),
							other_price: parseFloat(_this.other_price).toFixed(2),
							money: parseFloat(_this.money_price).toFixed(2),
							destination: _this.address.join(',')
						}).then(data => {});
						//接受订单接口
						_this.$api.post("orderstatus", {
							order_id: _this.id,
							order_type: _this.money_price > 0 ? type : 4
						}).then(data => {
							_this.address = ["", "", ""]
							_this.getdata()
							_this.$plug.isonshow(2)
						});
					}
				}
				if (type == 3) {
					_this.reason = true
				}
				if (type == 7 || type == 9 || type == 8 || type == 4 || type == 5) {
					let title = "确认本次操作"
					if (type == 9) {
						title = "取消看货需等待卖家审核,确认取消？"
					} else if (type == 8) {
						title = "同意用户取消看货？"
					} else if (type == 7) {
						title = "确认取消订单？"
					} else if (type == 4) {
						title = "拒绝用户取消看货申请？"
					} else if (type == 5) {
						title = "已完成看货？"
					}
					uni.showModal({
						content: title,
						success: function(res) {
							if (res.confirm) {
								_this.$api.post("orderstatus", {
									order_id: _this.id,
									order_type: type
								}).then(data => {
									_this.getdata()
									_this.$plug.isonshow(2)
								});
							}
						}
					});
				}
				if (type == 12) {
					uni.showModal({
						content: "确认不满意，退还诚意金？",
						success: function(res) {
							if (res.confirm) {
								_this.$api.post("orderstatus", {
									order_id: _this.id,
									order_type: 7
								}).then(data => {
									_this.getdata()
									_this.$plug.isonshow(2)
								});
							}
						}
					});
				}

			},
			//删除订单
			deleteOrder() {
				uni.showModal({
					content: '确认删除订单？',
					success: function(res) {
						if (res.confirm) {
							_this.$api.get("delordertime", {
								order_id: _this.id
							}).then(data => {
								_this.$plug.isonshow(2)
								wx.navigateBack({
									delta: 1
								})
							});
						}
					}
				});
			},
			//拒绝订单
			refuse() {
				if (_this.refuse_note.length < 1) {
					uni.showToast({
						title: "请输入拒绝理由",
						icon: "none"
					})
				} else {
					_this.$api.post("orderstatus", {
						order_id: _this.id,
						refuse_note: _this.refuse_note,
						order_type: 3
					}).then(data => {
						_this.reason = false
						_this.getdata()
						_this.$plug.isonshow(2)
						_this.reason = false
					});
				}
			},
			// 切换城市
			openAddres() {
				_this.$refs.simpleAddress.open();
			},
			onConfirm(e) {
				_this.address = e.label.split('-');
			},
			setcity(e) {
				_this.address = [e.province.label, e.city.label, e.area.label]
				console.log(_this.address, 111)
			},
			//填写议价信息
			addprice(type) {
				if (type == 1) {
					if (_this.unit_price.length < 1) {
						uni.showToast({
							title: "请输入协商单价",
							icon: "none"
						})
					} else {
						_this.unit_show = false
						_this.detail.unit_price = parseFloat(_this.unit_price).toFixed(2)
					}
				} else if (type == 2) {
					if (_this.other_price.length < 1) {
						uni.showToast({
							title: "请输入杂费",
							icon: "none"
						})
					} else {
						_this.other_show = false
						_this.detail.other_price = parseFloat(_this.other_price).toFixed(2)
					}
				} else {
					// if (_this.money_price.length < 1) {
					// 	uni.showToast({
					// 		title: "请输入诚意金",
					// 		icon: "none"
					// 	})
					// } else {
					// 	_this.money_show = false
					// 	_this.detail.money = parseFloat(_this.money_price).toFixed(2)
					// }
				}
			},
			// 立即支付
			pay() {
				uni.navigateTo({
					url: "orderPay?outnumber=3&source=2&id=" + _this.id
				})
			},
			// 立即购买
			purchase() {
				uni.navigateTo({
					url: "anOrder?id=" + _this.id
				})
			},
			//拨号并记录
			dialing(call_type, client_uid, mobile) {
				_this.$api.post("calllog", {
					calllog_uid: client_uid,
					call_type: call_type
				}).then(data => {
					_this.$plug.dialing(mobile)
				});
			},
			bindDateChange: function(e) {
				_this.startDate = e.target.value
				_this.detail.lookgoodstime = e.target.value

				_this.$api.post("saveSubScribeTime", {
					su_ord_id: _this.id,
					lookgoodstime: e.target.value
				}).then(data => {
					console.log(data)
					uni.showToast({
						title: '修改成功',
						icon: 'success',
						duration: 2000,
						success: function() {
							setTimeout(function() {
								_this.getdata()
							}, 500);
						}
					})
				});
			},
			intention(e) {
				console.log(e)
				let content
				if (e) {
					content = '该客户已经是意向客户，是否取消？'
				} else {
					content = '是否标记为意向客户？'
				}
				uni.showModal({
					content: content,
					success: function(res) {
						if (res.confirm) {
							_this.$api.post("intention", {
								order_id: _this.id,
								join_member_id: _this.detail.joinbuyers.id
							}).then(data => {
								console.log(data)
								if (data.code == "200") {
									uni.showToast({
										title: '标记意向成功',
										icon: 'success',
										duration: 2000,
										success: function() {
											setTimeout(function() {
												_this.getdata()
											}, 500);
										}
									})
								} else if (data.code == "201") {
									uni.showToast({
										title: '取消意向客户标记成功',
										icon: 'none',
										duration: 2000,
										success: function() {
											setTimeout(function() {
												_this.getdata()
											}, 500);
										}
									})
								}
							});
						}
					}
				});
			},
			getTime() {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();
				month = month > 9 ? month : '0' + month;
				day = day > 9 ? day : '0' + day;
				this.nowtime = `${year}-${month}-${day}`
				console.log(`${year}-${month}-${day}`, this.nowtime)
				return `${year}-${month}-${day}`;
			},
			// 跳转到聊天
			chat() {
				let obj = this.detail

				let images = []
				images.push(obj.getgoodsinfo.image)
				obj.getgoodsinfo.images = images
				obj.getgoodsinfo.name = obj.joinbuyers.name
				obj.getgoodsinfo.client_uid = obj.joinbuyers.id

				console.log(obj)
				wx.setStorageSync('list', obj.getgoodsinfo)
				uni.navigateTo({
					url: '../chat/chatingroom?type=5' + '&member_type=1'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.page {
		background-color: #F8F8F8;
		// padding-bottom: calc(292rpx + env(safe-area-inset-bottom));
	}

	.top {
		width: 690rpx;
		height: 478rpx;
		margin: 20rpx auto;
		background: #F8F8F8;
		border-radius: 20rpx;
		position: relative;

		.flow {
			width: 100%;
		}

		.sourthroad {
			position: absolute;
			right: 20rpx;
			top: 10rpx;
			line-height: 40rpx;
			font-size: 26rpx;
		}

		.tag {
			width: 252rpx;
			height: 78rpx;
			background: #38be8c;
			border-radius: 20rpx 0 20rpx 0;
			font-size: 28rpx;
			font-weight: 700;
			text-align: center;
			line-height: 78rpx;
			color: #ffffff;
		}

		.guide {
			font-size: 26rpx;
			color: #666666;
			margin-right: 24rpx;
		}

		.hexagon {
			position: relative;
			width: 100rpx;

			.one {
				width: 50rpx;
				height: 86.6rpx;
				margin: 0 auto;
				transform: translate(-50%, -50%);
				transform: rotate(30deg);
				background-color: #38BE8C;
			}

			.two {
				width: 50rpx;
				height: 86.6rpx;
				position: absolute;
				left: 25rpx;
				top: 0;
				transform: translate(-50%, -50%);
				transform: rotate(90deg);
				background-color: #38BE8C;
			}

			.three {
				width: 50rpx;
				height: 86.6rpx;
				position: absolute;
				left: 25rpx;
				top: 0;
				transform: translate(-50%, -50%);
				transform: rotate(330deg);
				background-color: #38BE8C;
			}
		}
	}

	.goods {
		padding: 24rpx 30rpx;
		background-color: #FFFFFF;
		margin-bottom: 20rpx;

		.buyer {
			font-size: 28rpx;
			color: #333333;
			margin-bottom: 28rpx;
		}

		.goodsImg {
			width: 180rpx;
			height: 180rpx;
			border-radius: 8rpx;
			margin-right: 20rpx;
			background-color: #EEEEEE;
		}

		.content {
			width: 480rpx;
		}

		.goodsName {
			font-size: 28rpx;
			color: #333333;
			line-height: 36rpx;
			height: 72rpx;
		}

		.spec {
			width: 100%;
			margin: 20rpx auto;
			border: 1rpx solid #e6e6e6;

			.tr {
				border-bottom: 1rpx solid #e6e6e6;
				display: flex;

				&:last-child {
					border-bottom: none;
				}
			}

			.td {
				min-width: 200rpx;
				line-height: 48rpx;
				font-size: 26rpx;
				padding: 0 26rpx;

				&:last-child {
					border-left: 1rpx solid #e6e6e6;
				}
			}
		}

		.price {
			font-size: 24rpx;
			font-weight: 500;
			color: #f73f3f;
			margin: 8rpx 0 14rpx;
		}

		.sku {
			font-size: 24rpx;
			color: #999999;
		}
	}

	.wrap {
		padding: 0 30rpx;
		margin-bottom: 20rpx;
		background-color: #FFFFFF;
	}

	.item {
		padding: 20rpx 0;
		line-height: 40rpx;
		font-size: 28rpx;
		color: #999999;

		.name {
			width: 190rpx;
			color: #000000;
		}

		.value {
			flex: 1;
		}

		.copy {
			width: 80rpx;
			height: 42rpx;
			background: #e6e6e6;
			border-radius: 22rpx;
			font-size: 24rpx;
			font-weight: 500;
			text-align: center;
			color: #999999;
			line-height: 42rpx;
		}

		.setval {
			border: 2rpx solid #38be8c;
			color: #38be8c;
			padding: 0 10rpx;
			border-radius: 25rpx;
		}
	}

	.exhibition {
		width: 750rpx;
		height: 292rpx;
		background: #ffffff;
		// position: fixed;
		position: sticky;

		bottom: 0;
		left: 0;
		padding-bottom: env(safe-area-inset-bottom);
		box-sizing: initial;
	}

	.reply {
		width: 750rpx;
		height: 172rpx;
		background: #ffffff;
		border-bottom: 20rpx solid #F8F8F8;
		padding-top: 40rpx;

		.status {
			font-size: 32rpx;
			font-weight: 700;
			text-align: center;
			color: #333333;
			margin-bottom: 10rpx;
		}

		.countdown {
			font-size: 24rpx;
			text-align: center;
			color: #333333;
		}
	}

	.foot {
		width: 100%;
		height: 110rpx;
		background: #ffffff;
		padding: 0 30rpx;
		flex-direction: row-reverse;
		bottom: 0;
		left: 0;

		.btn {
			width: 152rpx;
			height: 70rpx;
			background: #ffffff;
			border: 1rpx solid #333333;
			border-radius: 37rpx;
			font-size: 26rpx;
			text-align: center;
			line-height: 70rpx;
			color: #333333;
			margin-left: 40rpx;
		}

		.btn:last-child {
			margin-left: 0;
		}

		.btnFill {
			width: 152rpx;
			height: 70rpx;
			background: linear-gradient(90deg, #38be8c, #06adba 96%);
			border-radius: 36rpx;
			font-size: 26rpx;
			text-align: center;
			line-height: 70rpx;
			color: #ffffff;
			margin-left: 40rpx;
		}
	}

	.modal {
		width: 600rpx;
		text-align: center;
		padding: 40rpx 40rpx 10rpx;

		.title {
			font-size: 36rpx;
			font-weight: 700;
			text-align: center;
			color: #030517;
			line-height: 48rpx;
			margin-bottom: 36rpx;
		}

		.name {
			font-size: 28rpx;
			color: #333333;
			line-height: 90rpx;
			width: 150rpx;
			text-align: left;
		}

		input {
			height: 90rpx;
			border: 1rpx solid #999999;
			font-size: 28rpx;
			padding: 25rpx 22rpx;
			margin-left: 20rpx;
			flex: 1;
			text-align: left;
		}

		.confirm {
			font-size: 32rpx;
			font-weight: 700;
			text-align: center;
			color: #38be8c;
			padding: 29rpx 0 26rpx;
			border-top: 1rpx solid #FAFAFA;
			margin-top: 40rpx;
		}
	}
</style>
